<!DOCTYPE html>

<html>
<head>
	<title>AIL-Framework</title>
	<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png')}}">
	<!-- Core CSS -->
	<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/daterangepicker.min.css') }}" rel="stylesheet">

	<!-- JS -->
	<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
	<script src="{{ url_for('static', filename='js/popper.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/jquery.daterangepicker.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/d3/barchart_stack.js') }}"></script>
    <script src="{{ url_for('static', filename='js/d3/pie_chart.js') }}"></script>

	<style>
        .domain_name {
            display:inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 400px;
        }
	</style>

</head>

<body>

	{% include 'nav_bar.html' %}

	<div class="container-fluid">
		<div class="row">

			{% include 'crawler/menu_sidebar.html' %}

			<div class="col-12 col-lg-10" id="core_content">

				{% include 'crawler/crawler_disabled.html' %}

				<div class="row">
                    <div class="col-12 col-xl-6">
                        <div class="table-responsive mt-1 table-hover table-borderless table-striped">
                            <table class="table">
                                <thead class="thead-dark">
                                <tr>
                                    <th>Domain</th>
							        <th>First Seen</th>
                                    <th>Last Check</th>
							        <th>Status</th>
                                </tr>
                                </thead>
                                <tbody id="tbody_last_crawled">
                                {% for domain in domains %}
                                    <tr data-toggle="popover" data-trigger="hover"
                                        title="<span class='badge badge-dark'>{{domain['domain']}}</span>"
                                        data-content="epoch: {{domain['epoch']}}<br>last status: {{ domain['status'] }}">
                                        <td><a target="_blank" class="domain_name" href="{{ url_for('crawler_splash.showDomain') }}?domain={{ domain['domain'] }}&epoch={{domain['epoch']}}">{{ domain['domain'] }}</a></td>
								        <td>{{domain['first_seen']}}</td>
                                        <td>{{domain['last']}}</td>
								        <td>
                                            {% if domain['status_epoch'] %}
                                                <div style="color:Green; display:inline-block">
                                                    <i class="fas fa-check-circle"></i> UP
											    </div>
                                            {% else %}
                                                <div style="color:Red; display:inline-block">
                                                    <i class="fas fa-times-circle"></i> DOWN
											    </div>
                                            {% endif %} 

                                        </td>
                                    </tr>
										{% endfor %}
                                </tbody>
                            </table>
						</div>

					</div>
					<div class="col-12 col-xl-6">
						{% include 'crawler/show_domains_by_daterange.html' %}

						<div id="barchart_type"></div>

					</div>
				</div>

                <h3>Month Stats:</h3>
                <div id="barchart_type_month"></div>
                <div class="text-center" id="pie_chart_month"></div>

                <h3>Previous Month Stats:</h3>
                <div id="barchart_type_month"></div>
                <div class="text-center" id="barchart_type_previous_month"></div>

			</div>

		</div>
	</div>


</body>

<script>
var chart = {};
$(document).ready(function(){
	$("#page-Crawler").addClass("active");
	$("#nav_{{type}}_crawler").addClass("active");

	$('#date-range-from').dateRangePicker({
			separator : ' to ',
			getValue: function(){
					if ($('#date-range-from-input').val() && $('#date-range-to-input').val() )
							return $('#date-range-from-input').val() + ' to ' + $('#date-range-to-input').val();
					else
							return '';
					},
					setValue: function(s,s1,s2){
							$('#date-range-from-input').val(s1);
							$('#date-range-to-input').val(s2);
					}
	});
	$('#date-range-to').dateRangePicker({
			separator : ' to ',
			getValue: function(){
					if ($('#date-range-from-input').val() && $('#date-range-to-input').val() )
							return $('#date-range-from-input').val() + ' to ' + $('#date-range-to-input').val();
					else
							return '';
			},
			setValue: function(s,s1,s2){
					$('#date-range-from-input').val(s1);
					$('#date-range-to-input').val(s2);
			}
	});

    $.getJSON("{{ url_for('crawler_splash.crawlers_last_domains_json') }}?type={{type}}",
        function (data) {
                let div_width = $("#barchart_type").width();
                barchart_stack("barchart_type", data, {"width": div_width});
        }
    );

    $.getJSON("{{ url_for('crawler_splash.crawlers_last_domains_status_month_json') }}?type={{type}}",
        function (data) {
                pie_chart("pie_chart_month", data, {});
        }
    );

    $.getJSON("{{ url_for('crawler_splash.crawlers_last_domains_month_json') }}?type={{type}}",
        function (data) {
                let div_width = $("#barchart_type_month").width();
                barchart_stack("barchart_type_month", data, {"width": div_width});
        }
    );

    $.getJSON("{{ url_for('crawler_splash.crawlers_last_domains_previous_month_json') }}?type={{type}}",
        function (data) {
                let div_width = $("#barchart_type_previous_month").width();
                barchart_stack("barchart_type_previous_month", data, {"width": div_width});
        }
    );

});

function toggle_sidebar(){
	if($('#nav_menu').is(':visible')){
		$('#nav_menu').hide();
		$('#side_menu').removeClass('border-right')
		$('#side_menu').removeClass('col-lg-2')
		$('#core_content').removeClass('col-lg-10')
	}else{
		$('#nav_menu').show();
		$('#side_menu').addClass('border-right')
		$('#side_menu').addClass('col-lg-2')
		$('#core_content').addClass('col-lg-10')
	}
}
</script>

